<template>
  <div class="goosList">
    <view class="search" @tap="gotosearch">
      <view class="search-input">
        <icon type="search" size="16"></icon> {{searData.query}}
      </view>
  </view>
  <view class="tabs">
    <block v-for="(item,index) in tabs" :key="index">
      <view class="tabs-item" :class="{active:index===tabsIndex}" @tap="changeIndex(index)">{{item}}</view>
    </block>
  </view>
  <view class="pro-content">
    <block v-for="(item,index) in searchList" :key="index">
      <view class="pro-item" @tap="goDetail(item.goods_id)">
        <image :src="item.goods_small_logo"></image>
        <view class="pro-info">
          <view class="pro-text">{{item.goods_name}}</view>
          <view class="pro-price">￥{{item.goods_price}}.00</view>
        </view>
      </view>
    </block>
    <view class="warn" v-if="hasMore===false"> 我是有底线的！</view>
  </view>
  </div>
</template>
<script>
// import request from '@/utils/request.js'
import {getListData} from '@/api'
export default {
  data() {
    return {
      tabs:['综合','销量','价格'],
      tabsIndex:0,
      searData:{
        query:'',
        cid:'',
        pagenum:1,
        pagesize: '4'
      },
      searchList:[],
      hasMore:true
    };
  },
  onLoad(query) {
    this.searData.query = query.keyword;
  },
  onShow(){
    this.init()
  },
  onPullDownRefresh(){
   this.init()
  },
  onReachBottom(){
    this.getSearchList()
  },
  methods:{
    goDetail(id){
      wx.navigateTo({
        url: "/pages/detail/main?id="+id
      })
    },
    changeIndex(index){
      this.tabsIndex=index
    },
    init(){
      this.searchList = []
      this.searData.pagenum = 1
      this.hasMore = true
      this.getSearchList()
    },
    getSearchList(){
      if(!this.hasMore){
        return false
      }else{
        wx.showLoading({
          title: '加载中',
        })
          getListData(this.searData).then(res=>{
          console.log(res)
          let {goods} = res.data.message
          this.searchList = [...this.searchList,...goods]
            // this.lists = this.lists.concat(goods);
          wx.hideLoading()
          wx.stopPullDownRefresh()
          this.searData.pagenum += 1
          if(goods.length<this.searData.pagenum){
            this.hasMore = false
          }
        })
        // request('https://www.zhengzhicheng.cn/api/public/v1/goods/search','Get',this.searData).then(res=>{
        //   console.log(res)
        //   let {goods} = res.data.message
        //   this.searchList = [...this.searchList,...goods]
        //     // this.lists = this.lists.concat(goods);
        //   wx.hideLoading()
        //   wx.stopPullDownRefresh()
        //   this.searData.pagenum += 1
        //   if(goods.length<this.searData.pagenum){
        //     this.hasMore = false
        //   }
        // })
      }   
    },
    gotosearch(){
       wx.navigateTo({
        url: "/pages/search/main"
      })
    }
  }
};
</script>
<style lang="scss" scoped>
 .search {
    padding: 30rpx 16rpx;
    background: #ccc;
    position: relative;
    .search-input {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background: #fff;
      border-radius: 10rpx;
      font-size: 35rpx;
      text-indent: 20rpx;
    }
    .search-icon {
      position: absolute;
      left: 35rpx;
      top: 50rpx;
    }
  }
  .tabs{
    height: 100rpx;
    display: flex;
    border-bottom: 1rpx solid #ccc;
    .tabs-item{
      width: 33.33%;
      text-align: center;
      line-height: 100rpx;
    }
  }
  .active{
    color:red
  }
  .pro-content{
    width:100%;
    .pro-item{
      padding: 34rpx 22rpx;
      display: flex;
      border-bottom: 1px,solid #ccc;
      image{
        width: 200rpx;
        height: 202rpx;
      }
      .pro-info{
        position: relative;
        padding-left: 26rpx;
        flex: 1;
        .pro-text{
          padding-top: 20rpx;
          height: 90rpx;
          font-size: 26rpx;
          line-height: 45rpx;
          overflow:hidden;
          display:-webkit-box; 
          text-overflow:ellipsis;
          -webkit-line-clamp:2; 
          -webkit-box-orient:vertical;  
          white-space:normal; 
        }
        .pro-price{
          position: absolute;
          bottom: 0;
          left:26rpx;
          color:red
        }
      }
    }
    .warn{
      text-align: center;
      width: 100%;
      background: #ccc;
      height: 80rpx;
      line-height: 80rpx;
    }
  }
</style>
